6
6
.
.
5
5
V
V
i
i
e
e
w
w
s
s
-
-
A
A
d
d
v
v
a
a
n
n
c
c
e
e
d
d
O
O
p
p
e
e
r
r
a
a
t
t
i
i
o
o
n
n
s
s
A
A
n
n
i
i
m
m
a
a
t
t
i
i
o
o
n
n
s
s
View can get animated when some of its Properties change trough @State Variable like: Color, Position, Size, Rotation.
.animation Modifier
struct ContentView : View {
@State private var offset : CGFloat = 0
var body: some View {
Text("World")
.offset(x: offset)
.animation(Animation.easeOut(duration: 5))
.onAppear { self.offset = 100 }
}
}
withAnimation()
struct ContentView : View {
@State private var offset : CGFloat = 0
var body: some View {
Text("World")
.offset(x: offset)
.onAppear { withAnimation(.easeInOut(duration: 5)) { self.offset = 100 } }
}
}
T
T
r
r
a
a
n
n
s
s
i
i
t
t
i
i
o
o
n
n
s
s
Transition is animation with which View is added or removed from the view Hierarchy (defined by .transition modifier).
With Transition
struct ContentView: View {
@State private var show = true
var body: some View {
VStack {
Button("BUTTON") { self.show.toggle() }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.slide)
.animation(.default)
}
}
}
}
G
G
e
e
s
s
t
t
u
u
r
r
e
e
s
s
Gestures allow Users to interact with Views by using different motions of the fingers.
onTapGesture
struct ContentView: View {
var body: some View {
Text("HELLO")
.onTapGesture{ print("TAP") }
}
}
C
C
o
o
n
n
d
d
i
i
t
t
i
i
o
o
n
n
a
a
l
l
V
V
i
i
e
e
w
w
s
s
Programmatically add/remove View from the Screen
Ad/Remove Image when Button is pressed
struct ContentView: View {
//STATE VARIABLE
@State private var show = false
//BODY
var body: some View {
VStack {
Button("BUTTON") { self.show.toggle() }
if (show) { Image("Table").resizable().frame(width: 200, height: 200) }
}
}
}
C
C
r
r
e
e
a
a
t
t
e
e
V
V
i
i
e
e
w
w
s
s
f
f
r
r
o
o
m
m
A
A
r
r
r
r
a
a
y
y
u
u
s
s
i
i
n
n
g
g
F
F
o
o
r
r
E
E
a
a
c
c
h
h
ContentView.swift
struct Element : Identifiable {
let id = UUID()
let offset : CGFloat
let name : String
}
struct ContentView: View {
@State var elements : [Element] = [
Element( offset:20, name:"FIRST" ),
Element( offset:40, name:"SECOND"),
Element( offset:60, name:"THIRD" )
]
var body: some View {
ZStack {
ForEach(elements) { element in
Text(element.name).offset(y: element.offset)
}
}
}
}
